<template>
	<view class="content">
		<view class="head">
			<tui-tabs :tabs="tagList" :currentTab="activeTab" @change="clickTitle"></tui-tabs>
			<tui-searchbar :value="searchVal" radius="40rpx" placeholder="搜索" @search="onSearch" @cancel="searchHadle"
				@clear="searchHadle" />
		</view>
		<view class="main" v-if="totalOrder.length>0">
	<!-- 	<swiper :indicator-dots="false" :autoplay="false" style="height: 100%;" @change="swiper_change" :current="activeTab">
			<swiper-item v-for="(item,index) in tagList" :key="index" style="padding: 14px;box-sizing: border-box;">
				<scroll-view class="scroll" scroll-y @scrolltolower="onBottom">
					<view class="order_box" v-for="(item) in totalOrder" :key="item.id" @click="jumpDetail(item)">
						<view class="bodytitle">
							<view>订单号 : {{item.orderSn}}</view>
							<image src="@/static/copy.png" @tap.stop="copyText(item.orderSn)" mode="aspectFit" />
						</view>
						<view class="bodytitle2">
							<view class="bodytitle2-ms">{{item.sendCity}}</view>
							<view class="bodytitle2-ms">{{item.reveiveCity}}</view>
						</view>
						<view class="" style="text-align: center;">
							<view class="bodytitle-status">{{item.status_msg}}</view>
							<image style="width: 90px;height: 10px;margin-top: 5px" src="@/static/jt.png" />
						</view>
						<view class="bodytitle2">
							<view class="bodytitle2-ms">{{item.sendUser}}</view>
							<view class="bodytitle2-ms">{{item.reveiveUser}}</view>
						</view>
						<view class="bodytitle4" v-if="activeTab===2">
							<view class="bodytitle4-ms">司机电话 :</view>
							<view class="bodytitle4-ms1">{{item.driverPhone}}</view>
							<view class="bodytitle4-ms1" @tap.stop="clickTelephone(item)"><uni-icons type="phone-filled"
									size="25" color="orange" />
							</view>
						</view>
						<view class="bodytitle4">
							<view class="bodytitle4-ms">下单时间 :</view>
							<view class="bodytitle4-ms1">{{item.createTime}}</view>
						</view>
						<view class="">
				
						</view>
						<view class="goToPay" v-if="!activeTab">
							<tui-tag class="tag" type="light-orange" shape="circle"
								@tap.stop="cancelOrders(item,'cancel')">取消订单</tui-tag>
							<tui-tag class="tag" type="light-green" shape="circle" @tap.stop="goToPay(item)">去支付</tui-tag>
				
						</view>
						<view class="goToPay" v-if="activeTab==1">
							<tui-tag class="tag" type="light-orange" shape="circle"
								@tap.stop="inputDialogToggle(item)">取消订单</tui-tag>
						</view>
						<view class="goToPay" v-if="item.payButton == '0'">
							<tui-tag class="tag" type="light-green" shape="circle" @tap.stop="payment(item)">补缴费用</tui-tag>
						</view>
						<view class="goToPay" v-if="activeTab==3 && !item.isComment2">
							<tui-tag class="tag" type="light-green" shape="circle"
								@tap.stop="goToEvaluate(item,2)">运输评价</tui-tag>
							<tui-tag class="tag" type="light-green" shape="circle"
								@tap.stop="gotoSub(item)">重新下单</tui-tag>
						</view>
						
						<view class="goToPay" v-if="activeTab==4">
							<tui-tag class="tag" type="light-green" shape="circle"
								@tap.stop="gotoSub(item)">重新下单</tui-tag>
						</view>
					</view>
					<tui-nomore v-if="!lis.pullUpOn" />
					<tui-loadmore v-if="loadding" :index="3" type="primary" />
				</scroll-view>
			</swiper-item>
			
		</swiper> -->
			<scroll-view class="scroll" scroll-y @scrolltolower="onBottom">
				<view class="order_box" v-for="(item) in totalOrder" :key="item.id" @click="jumpDetail(item)">
					<view class="bodytitle">
						<view>订单号 : {{item.orderSn}}</view>
						<image src="@/static/copy.png" @tap.stop="copyText(item.orderSn)" mode="aspectFit" />
					</view>
					<view class="bodytitle2">
						<view class="bodytitle2-ms">{{item.sendCity}}</view>
						<view class="bodytitle2-ms">{{item.reveiveCity}}</view>
					</view>
					<view class="" style="text-align: center;">
						<view class="bodytitle-status">{{item.status_msg}}</view>
						<image style="width: 90px;height: 10px;margin-top: 5px" src="@/static/jt.png" />
					</view>
					<view class="bodytitle2">
						<view class="bodytitle2-ms">{{item.sendUser}}</view>
						<view class="bodytitle2-ms">{{item.reveiveUser}}</view>
					</view>
					<view class="bodytitle4" v-if="activeTab===2">
						<view class="bodytitle4-ms">司机电话 :</view>
						<view class="bodytitle4-ms1">{{item.driverPhone}}</view>
						<view class="bodytitle4-ms1" @tap.stop="clickTelephone(item)"><uni-icons type="phone-filled"
								size="25" color="orange" />
						</view>
					</view>
					<view class="bodytitle4">
						<view class="bodytitle4-ms">下单时间 :</view>
						<view class="bodytitle4-ms1">{{item.createTime}}</view>
					</view>
					<view class="">

					</view>
					<view class="goToPay" v-if="!activeTab">
						<tui-tag class="tag" type="light-orange" shape="circle"
							@tap.stop="cancelOrders(item,'cancel')">取消订单</tui-tag>
						<tui-tag class="tag" type="light-green" shape="circle" @tap.stop="goToPay(item)">去支付</tui-tag>

					</view>
					<view class="goToPay" v-if="activeTab==1">
						<tui-tag class="tag" type="light-orange" shape="circle"
							@tap.stop="inputDialogToggle(item)">取消订单</tui-tag>
					</view>
					<view class="goToPay" v-if="item.payButton == '0'">
						<tui-tag class="tag" type="light-green" shape="circle" @tap.stop="payment(item)">补缴费用</tui-tag>
					</view>
					<view class="goToPay" v-if="activeTab==3 && !item.isComment2">
						<tui-tag class="tag" type="light-green" shape="circle"
							@tap.stop="goToEvaluate(item,2)">运输评价</tui-tag>
						<tui-tag class="tag" type="light-green" shape="circle"
							@tap.stop="gotoSub(item)">重新下单</tui-tag>
					</view>
					
					<view class="goToPay" v-if="activeTab==4">
						<tui-tag class="tag" type="light-green" shape="circle"
							@tap.stop="gotoSub(item)">重新下单</tui-tag>
					</view>
				</view>
				<tui-nomore v-if="!lis.pullUpOn" />
				<tui-loadmore v-if="loadding" :index="3" type="primary" />
			</scroll-view>

		</view>
		<tui-no-data v-else imgUrl="/static/images/toast/img_nodata.png">暂无数据</tui-no-data>
		<tui-modal :button="button" :show="modal" @click="handleClick" title="提示" :content="`确定取消订单吗？`" />
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose"  mode="input" title="请输入您的退款原因" v-model="message" value="对话框预置提示内容!"
					placeholder="请输入内容" @confirm="applyForRefund(val,item)"></uni-popup-dialog>
				
		</uni-popup>
	</view>
</template>

<script>
	import $store from '@/store/index'
	import {
		baseUrl
	} from '@/util/config.js'
	import {
		wxOrderList,
		cancelOrder,
		refundAPI,
		listSerach,
		comment,
		supplement,
		orderInfo
	} from '@/api/index'
	export default {
		data() {
			return {
				active: 0,
				activeTab: 0,
				searchVal: '',
				orderNumber: "CX2950324792893444",
				// totalOrder: [{
				// 	id:0,
				// 	list:[]
				// },{
				// 	id:1,
				// 	list:[]
				// },{
				// 	id:2,
				// 	list:[]
				// },{
				// 	id:4,
				// 	list:[]
				// },{
				// 	id:5,
				// 	list:[]
				// }],
				totalOrder: [],
				dialogInput:'',
				itemobject:{},
				tagList: [{
					name: '待付款',
					id: 0,
				}, {
					name: '待取件',
					id: 1,
				}, {
					name: '运输中',
					id: 2,
				}, {
					name: '已完成',
					id: 4,
				}, {
					name: '已取消',
					id: 5,
				}],
				pendingOrders: [],
				modal: false,
				orderLi: {},
				button: [{
						text: "取消",
						type: "gray",
						plain: true
					},
					{
						text: "确定",
						type: "primary",
						plain: false
					}
				],
				loadData: [],
				pageNum: 1,
				pageSize: 10,
				total_pages: 1,
				message:'',
				lis: {
					loadding: false,
					pullUpOn: true,
				},
				socketMsgQueue: [],
			}
		},
		components: {},
		mounted() {
			// console.log(uni.$tui.dates(121321321))
			let token = uni.getStorageSync('X-Access-Token') ? true : false
			if (!token) {
				uni.navigateTo({
					url: '/pages/index/index',
				})
			}
			let that = this;
			const userInfo = uni.getStorageSync('user')
			uni.connectSocket({
				url: `wss://backend.xiaomagewuliuhuoyun.top/websocket/message/` + userInfo.userId,
			});
			uni.onSocketOpen(function(res) {
				console.log(res);
				that.socketopen = true;
			});
			uni.onSocketMessage(function(res) {
				console.log(res.data);
				if (res.data == 'updateOrder') {
					that.getData()
				}
			});
		},
		onShow() {
			this.getData()
		},
		methods: {
			gotoSub(e){
				orderInfo({
					id: e.id,
				}, 'get').then((res) => {
					console.log(res)
					// let formObject = uni.getStorageSync('form');
					// //收件地址缓存对象
					// let formReceipt = uni.getStorageSync('formReceipt');
					// this.form.sendUser = formObject.sendUser
					// this.form.sendPhone = formObject.sendPhone
					// this.form.sendAddr = formObject.detailAddress
					// this.form.sendCity = formObject.city
					// this.form.sendLatitude = formObject.latitude
					// this.form.sendLongitude = formObject.longitude
					// this.form.reveiveUser = formReceipt.reveiveUser
					// this.form.receivePhone = formReceipt.receivePhone
					// this.form.reveiveAddr = formReceipt.province + formReceipt.detailAddress
					// this.form.reveiveCity = formReceipt.city
					// this.form.receiveLongitude = formReceipt.longitude
					// this.form.receiveLatitude = formReceipt.latitude
					// uni.setStorageSync('sendAddress',e)
					let order = res.data.order;
					let formObject = {sendUser:order.sendUser,sendPhone:order.sendPhone,
					detailAddress:order.sendAddr,city:order.sendCity,latitude:order.sendLatitude,longitude:order.sendLongitude}
					let formReceipt = {reveiveUser:order.reveiveUser,receivePhone:order.receivePhone,province:'',
					detailAddress:order.receiveAddr,city:order.reveiveCity,longitude:order.receiveLongitude,latitude:order.receiveLatitude}
					
					uni.setStorageSync('form',formObject)
					uni.setStorageSync('formReceipt',formReceipt)
					uni.setStorageSync('cargo',res.data.cargo)
					uni.setStorageSync('order',res.data.order)
					
					uni.switchTab({
						url:"/pages/expressPages/expressPages"
					})
				})
			},
			applyForRefund(val,item) {
				let params = {
					orderId: this.itemobject.id,
					message:this.message,
					wechatId:uni.getStorageSync('user').userId
				}
				refundAPI(params, 'get')
					.then((res) => {
						uni.showToast({
							title: '退款成功',
							icon: 'none'
						});
						this.$refs.inputDialog.close()
						this.getData(1)
					})
			},
			inputDialogToggle(item) {
				this.$refs.inputDialog.open()
				this.itemobject=item;
			},
			searchHadle() {
				this.getData()
			},
			onSearch(val) {
				this.searchVal = val.value
				listSerach({
					serach: val.value,
					tag: this.active
				}, 'get').then((res) => {
					res.rows.forEach(item => {
						if (item.status == 0) {
							item.status_msg = '待付款'
						} else if (item.status == 1) {
							item.status_msg = '待取件'
						} else if (item.status == 2) {
							item.status_msg = '运输中'
						} else if (item.status == 4) {
							item.status_msg = '已完成'
						} else if (item.status == 5) {
							item.status_msg = '已取消'
						}
						item.createTime = uni.$tui.dates(item.createTime)
						console.log(item)
					})
					this.totalOrder = res.rows
				})
			},
			onBottom(val) {
				if (!this.lis.pullUpOn) return
				this.lis.loadding = true
				this.pageNum = this.pageNum + 1
				this.getData()
			},
			getData(id) {
				wxOrderList({
						tag: id ? id : this.active,
						pageNum: this.pageNum,
						pageSize: this.pageSize
					}, 'get')
					.then((res) => {
						if (res.code == 200) {
							res.rows.forEach(item => {
								if (item.status == 0) {
									item.status_msg = '待付款'
								} else if (item.status == 1) {
									item.status_msg = '待取件'
								} else if (item.status == 2) {
									item.status_msg = '运输中'
								} else if (item.status == 4) {
									item.status_msg = '已完成'
								} else if (item.status == 5) {
									item.status_msg = '已取消'
								}
								
								item.createTime = uni.$tui.dates(item.createTime)
								console.log(item)
							})
							this.lis.loadding = false
							if (this.pageNum == res.totalPage) this.lis.pullUpOn = false
							this.loadData = res.rows
							if (this.pageNum == 1) {
								this.totalOrder = this.loadData
							} else {
								this.totalOrder = this.totalOrder.concat(this.loadData)
							}
						}
					})
			},
			jumpDetail(item) {
				if (this.active == 2) {
					uni.navigateTo({
						url: `/pages/orderList/detail?orderSn=${item.orderSn}`
					})
				}
			},
			clickTitle(data) {
				console.log(data, 111);
				this.activeTab = data.index
				this.active = data.item.id
				this.pageNum = 1
				this.lis.loadding = false
				this.lis.pullUpOn = true
				this.getData(data.item.id)
			},
			clickTelephone(item) {
				if (item.telephone != "") {
					uni.makePhoneCall({
						phoneNumber: item.telephone //仅为示例
					});
				} else {
					uni.showToast({
						title: '未存手机号',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			//复制文本
			copyText(text) {
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
			payment(data) {
				supplement({}, 'get', data.orderSn)
					.then((res) => {
						if (res.code == 200) {
							uni.navigateTo({
								url: `/pages/pay/supplementary?payCode=${data.id}&payAmount=${res.data.amount}&orderSn=${data.orderSn}`
							})
						}
					})
			},
			// 去评价
			goToEvaluate(item, type) {
				uni.navigateTo({
					url: `/pages/orderList/evaluate?orderId=${item.orderSn}&freightDriverId=${item.freightDriverId}&wechatUserId=${item.wxUserId}&type=${type}&courierId=${item.courierId}`
				})
			},
			//去支付
			goToPay(data) {
				$store('app').usePayCashier({
					payCode: data.id,
					orderSource: 2,
					payAmount: data.amount,
					backUrlKey: '/pages/orderList/orderList'
				})
			},
			cancelOrders(item, level) {
				this.orderLi = item
				this.modal = true
			},
			
			handleClick(e) {
				
				if (e.index) {
					cancelOrder({
							orderId: this.orderLi.id
						}, 'post')
						.then((res) => {
							uni.showToast({
								title: '取消订单成功',
								icon: 'none'
							});
							this.getData(this.active)
						})
				}
				this.modal = false;
			},
			
			//swiper 切换订单列表
			swiper_change(e){
				console.log(e.detail.current)
				this.activeTab = e.detail.current
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #f2f3f5;
		position: relative;
	}

	.goToPay {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;

		.tag {
			margin-left: 6px;
		}
	}

	.head {
		position: sticky;
		top: 0;
		background-color: #ffffff;
		z-index: 999;

		.head-titleyx {
			line-height: 80rpx;
			border-bottom: 1rpx solid orange;
			color: white;
			font-weight: bold;
			color: orange;

		}

		.head-title {
			line-height: 80rpx;
			font-weight: bold;
		}
	}

	.scroll {
		height: 100%;
	}

	.main {
		padding: 14px;
		height: calc(100vh - 132px);
	}

	.order_box+.order_box {
		margin-top: 20rpx;
	}

	.order_box {
		padding: 14px;
		background: white;
		border-radius: 30rpx;
		box-shadow: 5px 5px 10px rgb(227, 242, 204);

		.bodytitle {
			display: flex;
			color: rgb(136, 136, 136);
			padding-bottom: 14px;
			border-bottom: 1rpx solid rgb(136, 136, 136);

			image {
				width: 25rpx;
				height: 25rpx;
				margin-top: 10rpx;
				margin-left: 20rpx;
			}
		}

		.bodytitle2 {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-around;

			.bodytitle2-ms {
				font-weight: bold;
			}
		}

		.bodytitle-status {
			color: orange;
			font-weight: bold;
		}

		.bodytitle4 {
			margin-top: 30rpx;
			display: flex;
			align-items: center;

			.bodytitle4-ms1 {
				color: rgb(136, 136, 136);
				margin-left: 10rpx;
			}
		}
	}
</style>